<template>
    <div class="shoppingcart-main">
        <header>
            <i @click="goBack()"></i>
            <div>购物车</div>
            <span @click='manageCart()'>{{manage}}</span>
        </header>
        
        <div class="sc-goods-list">
            <div class='mc' v-if="list.length<1">
                <img src="../../image/no_collection@2x.png" width='110' alt="">
                <p>购物车竟然是空的!</p>
            </div>
            <div class="sc-goods-list-one" v-for='(item,index) in list' :key="index">
                <label class="sc-goods-label" @change="select">
                    <input type="checkbox" class="sc-goods-checkbox" v-model="gender" :value="item"/>
                    <span class="sc-normal"></span>
                    <div class="sc-goods-cover">
                        <img :src="item.img_url" />
                    </div>
                    <div class="sc-goods-name">
                        {{item.name}}
                    </div>
                    <div class="sc-goods-color">规格颜色：{{item.standard? (JSON.parse(item.standard).size +"+"+ JSON.parse(item.standard).color):''}}</div><br />
                    <div class="sc-goods-price-number">
                        <span class="sc-goods-price">{{item.price}}</span>
                        <span class="sc-goods-number">×{{item.num}}</span>
                    </div>
                </label>
            </div>
        </div>
        <div class="sc-foot-gotopayfor" v-if="list.length>=1">
            <div class="sc-foot-left">
                <div @click="checkedall()">
                    <span class="sc-all-normal" v-show="!isSelectAll"></span>
                    <span class="sc-all-normal allchecked" v-show="isSelectAll"></span>
                    <span class="sc-all-normal-title">全选</span>
                </div>
                 <span class="sc-zongjia">{{totalPrice}}</span>
                 <span class="sc-zongjia-title">合计:</span>
            </div>
            <div class="sc-foot-right" @click="balance">{{status}}</div>
        </div>
    </div>
</template>
<script>
	import { MessageBox,Loadmore } from 'mint-ui';
	export default {
		data() {
			return {
                userid: '',
                list: [],
				checked:0,
                sentPage:{
                  page:"1",
                  rows:"10"
                },//接口入参
                gender: [],  //选择的商品
                isSelectAll: false,
                totalPrice: 0,
                status: '结算',  //结算||删除
                manage: '管理', //管理or取消
			}
		},
		created() {
            this.getCartsData();
		},
		methods:{
            goBack() {
                this.$router.back();
            },
            //管理购物车商品
            manageCart() {
                if(this.status == '结算') {
                    this.status='删除';
                    this.manage = '取消';
                }else {
                   this.status='结算';
                   this.manage = '管理';
               }
            },
            //获取购物车列表
            getCartsData() {
                this.userid = localStorage.getItem("loginMobile");
                // 第一个参数是root--baseurl
                this.$api.post(this.$api.baseURLSchool,"selecttype_view/view_goods_cart/0?uid="+this.userid,this.sentPage,r => {
                    console.log(r);
                    this.list = r.data.rows;
                },err => {
                    console.log(err);
                })
            },
            //全选
			checkedall:function(){
                var _this = this;
                if(!this.isSelectAll) {  //全选
                    _this.gender = [];
                    _this.totalPrice = 0;
                    _this.list.forEach(function(item,index) {
                        _this.gender.push(item);
                        _this.totalPrice += (item.price*item.num);
                    });
                    _this.isSelectAll = true;
                }else {   //反选
                    _this.gender = [];
                    _this.totalPrice = 0;
                    _this.isSelectAll = false;
                }
                console.log(this.gender);

			},
            //多选框change事件
            select() {
                var _this = this;
                console.log(this.gender);
                this.totalPrice = 0;
                this.gender.forEach(function(item,index) {
                    _this.totalPrice += (item.price*item.num);
                });
                if(this.gender.length<this.list.length) {
                    this.isSelectAll = false;
                }else if(this.gender.length==this.list.length) {
                    this.isSelectAll = true;
                }
            },
            //结算or删除购物车
            balance() {
                if(this.status == '结算') {
                    if(this.gender.length) {
                        this.$router.push({path:'/firmOrder',query:{cartsList: JSON.stringify(this.gender)}});
                    }else {
                        this.$utils._toast("请选择商品");
                    }
                }else {
                    if(this.gender.length) {
                        console.log(this.gender);
                        var that = this;
                        MessageBox.confirm('确定删除这'+this.gender.length+'件商品?').then(action => {

                            this.gender.forEach(function(item,index) {
                                console.log(item.cid);
                                const params = {
                                    id: item.cid
                                }
                                that.$api.post(that.$api.baseURLSchool,"dataupdate/carts/del",params,r => {
                                    if(r.data.ret == 1) { //删除成功 更新购物车表
                                        that.getCartsData();
                                    }
                                },err => {
                                    console.log(err);
                                })
                            });
                            this.status = '结算';
                            this.totalPrice = 0;
                            this.gender = [];
                        },r => {
                            this.status = '删除';
                        });

                    }else {
                        this.$utils._toast("请选择商品");
                    }
                }

            }

		}
	}

</script>

<style lang="scss" scoped>
    .mc {
        padding: 40px 0;
		margin: auto;
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%,-50%);
		img {
			display: block;
			margin: 0 auto;
		}
		p {
			padding-top: 10px;
			text-align: center;
		}
	}

</style>